<template>
  <div class="ident_main">
    <head-top head-title="业主变更" go-back="true"></head-top>
    <!--信息填写部分-->
    <ul>
      <mt-cell title="选择小区：" :value="villageText" is-link @click.native="goMyVillage"></mt-cell>
      <li class="border-bottom">
        <mt-cell title="房屋信息：" :value="areaString" is-link @click.native="handlerArea"></mt-cell>
      </li>
      <!--<li class="border-bottom" v-show="roomSelectShow">-->
      <!--<mt-cell title="房号：" :value="roomString" is-link @click.native="openRoom"></mt-cell>-->
      <!--</li>-->
      <li class="li_li border-bottom">
        <span>房&nbsp;&nbsp;&nbsp;&nbsp;号：</span>
        <input class="room_input" type="text" v-show="roomFill" :placeholder="fillString" v-model.trim="roomNum">
        <div class="roombtn">
          <mt-button @click="openRoom" v-show="roomSelectShow">
            <span>{{roomString}}</span>
            <img @click="openRoom2" src="../home/images/fanhui1@2x.png" alt="">
          </mt-button>
          <mt-button @click="openRoom2" v-show="roomSelectShow2">
            <span></span>
            <img @click="openRoom2" src="../home/images/fanhui1@2x.png" alt="">
          </mt-button>
        </div>
      </li>
      <li class="li_li border-bottom" v-show="areashow">
        <span>面 积(㎡)：</span>
        <input type="tel" :placeholder="acreageString" v-model.trim="area">
      </li>
      <li class="li_li border-bottom">
        <span>联 系 人：</span>
        <input type="text" placeholder="请输入联系人姓名" v-model.trim="realname" readonly="true">
      </li>
      <li class="li_li border-bottom">
        <span>联系方式：</span>
        <input type="tel" placeholder="请输入联系人电话号码" maxlength="11" v-model.trim="phoneNum" autocomplete="on"
               readonly="true">
      </li>
      <li class="li_li">
        <span>验 证 码&nbsp;：</span>
        <input class="code_input" type="tel" placeholder="请输入验证码" v-model.trim="codeNum" maxlength="4">
        <div class="btn">
          <mt-button @click="getCodeNum" type="primary" :disabled="time ==0 || time==60 ? false : true ">
            <span v-show="sendMsgDisabled">{{time + 's后获取'}}</span>
            <span v-show="!sendMsgDisabled">{{msg}}</span>
          </mt-button>
        </div>
      </li>
    </ul>
    <!--小区弹窗部分-->
    <mt-popup
      v-model="villageShow"
      popup-transition="popup-fade" class="villageHeights">
      <div class="village">
        <p class="p border-bottom">请选择小区</p>
        <div class="plot-wrapper">
          <div class="search">
            <div class="search-wrapper">
              <input type="text" placeholder="请输入小区的名称" v-model="keyword" @keyup.enter="search" @input="search">
              <span class="search-icon" @click="search"></span>
            </div>
          </div>
        </div>
      </div>
      <mt-index-list>
        <mt-index-section :index="index" v-for="(item,index) in data" :key="index">
          <div v-for="(list,index) in item" @click="goVillage(list)">
            <mt-cell :title="list.title"></mt-cell>
          </div>
        </mt-index-section>
      </mt-index-list>
    </mt-popup>
    <!--房屋弹窗部分-->
    <mt-popup v-model="areaVisible" class="area-class" position="bottom">
      <div class="btn_list">
        <button class="btn_one" @click="cancelBtn()">取消</button>
        <button class="btn_two" @click="sureBtn()">确定</button>
      </div>
      <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
    </mt-popup>
    <!--房号弹窗部分-->
    <mt-popup
      v-model="roomVisible"
      popup-transition="popup-fade" class="room_popup">
      <ul>
        <!--<li class="other_btn" @click="selectOther">其他</li>-->
        <li class="other_btn">房号</li>
        <li class="roomnum border-bottom" v-for="(num,index) in roomNumList" :key="index"
            @click="selectRoomNum(num.name)">{{num.name}}
        </li>
      </ul>
    </mt-popup>
    <!--证件上传-->
    <div class="line"></div>
    <div class="ticket">
      <h3 class="border-bottom">请上传相关凭证<span>(房产证、购房合同、身份证等能够证明业主身份的材料)</span></h3>
      <!--微信浏览器图片上传组件-->
      <ident-publish v-if="weixinShow" @getImage="getImage" des-text="true"></ident-publish>
      <!--普通浏览器图片上传组件-->
      <ident-pub v-if="ordinaryShow" @getImg="getImg"></ident-pub>
    </div>
    <!--微信浏览器提交按钮事件-->
    <div v-if="weixinShow" class="btn_box">
      <button @click="submitBtn">
        <span>确认提交</span>
      </button>
    </div>
    <!--普通浏览器提交按钮事件-->
    <div v-if="ordinaryShow" class="btn_box">
      <button @click="submitOrBtn">
        <span>确认提交</span>
      </button>
    </div>
  </div>
</template>
<style lang="scss">
  @import "../../common/sass/mixin.scss";

  .ident_main {
    width: 100%;
    padding-top: 40px;
    ul {
      .li_li {
        margin: 0 10px;
        font-size: 16px;
        height: 48px;
        line-height: 48px;
        position: relative;
        span {
          &.span-color {
            font-size: 15px;
            color: #888;
          }
        }
        img {
          position: absolute;
          right: 0;
          top: 13px;
          width: 9px;
          height: 16px;
        }
        input {
          width: 50%;
          border: none;
          outline: none;
          font-size: 15px;
          color: #888;
          &.room_input {
            width: 105px;
          }
          &.code_input {
            width: 105px;
          }
        }
      }
      .roombtn {
        float: right;
        .mint-button {
          font-size: 14px;
          height: 30px;
          background: #fff;
          border: none;
          box-shadow: none;
          span {
            margin-right: 10px;
            font-size: 15px;
          }
          img {
            margin-top: -6px;
          }
        }
      }
      .btn {
        float: right;
        .mint-button {
          font-size: 14px;
          height: 30px;
        }
        .mint-button--primary {
          background-color: #fff;
          border: 1px solid #0b7ad9;
          color: #0078de;
        }
        .mint-button--normal {
          padding: 0 10px;
        }
      }
    }
    // 弹窗样式
    .villageHeights {
      width: 100%;
      border-radius: 5px;
      .village {
        .p {
          font-size: 15px;
          text-align: center;
          line-height: 39px;
        }
        .plot-wrapper {
          width: 100%;
          padding-top: 40px;
          background: #fff;
          .search {
            width: 100%;
            position: fixed;
            top: 40px;
            left: 0;
            background-color: #fff;
            text-align: center;
            height: 44px;
            line-height: 44px;
            .now-plot {
              padding-left: 10px;
              text-align: left;
              font-size: 15px;
              height: 40px;
              line-height: 40px;
              background-color: #D9D9D9;
            }
            .search-wrapper {
              display: inline-block;
              height: 30px;
              line-height: 30px;
              width: 80%;
              margin: 0 10px;
              border-radius: 4px;
              background-color: #e6e6e6;
              input {
                width: 118px;
                font-size: 14px;
                outline: none;
                border: none;
                background-color: #e6e6e6;
                &::-ms-input-placeholder {
                  text-align: center;
                }
                &::-webkit-input-placeholder {
                  text-align: center;
                }
              }
              .search-icon {
                display: inline-block;
                width: 17px;
                height: 17px;
                background-size: 17px 17px;
                background-repeat: no-repeat;
                @include bgimg('../../components/home/images/search');
                vertical-align: middle;
              }
            }
          }
        }
      }
      height: 90%;
      .mint-indexlist {
        height: 80%;
      }
      .mint-indexlist-content {
        height: 100% !important;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
      }
      .mint-cell-wrapper {
        background-size: 120% 0px;
      }
    }
    .area-class {
      width: 100%;
      height: 40%;
      .btn_list {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #f2f2f2;
        .btn_one, .btn_two {
          width: 120px;
          height: 39px;
          background: #fff;
          outline: none;
          border: none;
          font-size: 15px;
        }
        .btn_one {
          float: left;
        }
        .btn_two {
          float: right;
          color: #007aff;
        }
      }
    }
    .room_popup {
      width: 60%;
      height: 30%;
      border-radius: 4px;
      overflow: auto;
      .other_btn {
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-bottom: 1px solid #d7d7d7;
        font-size: 15px;
      }
      .roomnum {
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
    }
    .line {
      width: 100%;
      height: 5px;
      background: #f2f2f2;
    }
    .ticket {
      width: 100%;
      h3 {
        font-size: 14px;
        font-weight: normal;
        margin: 15px 10px 0 10px;
        padding-bottom: 15px;
        span {
          color: red;
        }
      }
    }
    .btn_box {
      width: 100%;
      text-align: center;
      padding-bottom: 20px;
      button {
        width: 90%;
        height: 44px;
        background: #0078de;
        outline: none;
        border: none;
        border-radius: 5px;
        margin-top: 20px;
        span {
          font-size: 15px;
          color: #fff;
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import { loadVillageId, loadTitle } from '../../common/js/cache.js'
  import { Toast, Indicator } from 'mint-ui'
  import { getVillageLoad, searchKeyword } from '../../api/cityVillage.js'
  import IdentPublish from '../common/IdentPublish.vue'
  import IdentPub from '../common/Identpublish1'
  import { getUser, getIndentCode, getHomeDate, subData, getRoomNum, subOrData } from '../../api/MyIdent.js'
  import { IsWeiXin } from '../../common/js/isWeiXin'

  let index = 0 // 默认设置二级的index
  let index2 = 0 // 默认设置三级的index
  let p = [] // 初始化苑
  let c = [] // 初始化楼幢
  let a = [] // 初始化单元
  export default {
    name: 'Ident',
    data () {
      return {
        area: '', // 面积
        roomNum: '', // 房号
        fillString: '例如1101', // 输入房号的提示
        roomString: '请选择房号', // 选择房号的提示
        roomVisible: false, // 房号列表数据弹窗
        roomNumList: [],
        otherNum: '', // 1是其他 2是选择室
        acreageString: '请输入面积',
        roomSelectShow: true, // 是否显示选择的房号
        roomSelectShow2: false, // 选择其他后再次选择房号弹窗
        roomFill: false, // 是否显示填写的房号
        areashow: false, // 是否显示面积输入
        realname: '', // 真实姓名
        phoneNum: '', // 电话号码
        data: {}, // 获取小区列表数据
        villageText: '请选择小区',
        village: '', // 小区标题
        villageid: '', // 小区id
        villageShow: false,
        houseShow: false,
        keyword: '',
        codeNum: '', // 验证码
        msg: '获取验证码',
        time: 60, // 发送验证码倒计时
        sendMsgDisabled: false,   // 按钮上的显示文本（false:显示为时间跳动的文本  true:显示为发送验证码）
        serverIds: [], // 图片
        status: 1,
        lists: [],
        areaVisible: false,
        areaString: '请选择房屋信息',
        array: [],
        did: '', // 单元id
        keepArea: '', // 房屋信息
        slots: [{
          flex: 1,
          values: p,
          className: 'slot1',
          textAlign: 'center'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: c,
          className: 'slot3',
          textAlign: 'center'
        }, {
          divider: true,
          content: '-',
          className: 'slot4'
        }, {
          flex: 1,
          values: a,
          className: 'slot5',
          textAlign: 'center'
        }],
        ordinaryShow: {
          type: Boolean // 普通浏览器
        },
        weixinShow: {
          type: Boolean // 微信浏览器
        },
        ordinaryImg: [] // 普通浏览器图片
      }
    },
    components: {
      headTop,
      IdentPublish,
      IdentPub
    },
    created () {
      // 默认小区名和小区id
      this.villageText = loadTitle()
      this.villageid = loadVillageId()
      // 获取房屋信息
      this.getdatas(this.villageid)
      this._getUser()
      // 判断是否是微信浏览器
      if (IsWeiXin()) {
        this.ordinaryShow = false
        this.weixinShow = true
      } else {
        this.ordinaryShow = true
        this.weixinShow = false
      }
    },
    methods: {
      // 小区弹窗
      goMyVillage () {
        this.villageShow = true
        this.keyword = ''
        this._getVillage()
      },
      // 获取小区列表
      _getVillage () {
        getVillageLoad().then(res => {
          if (res.code === 200) {
            this.data = res.data
          }
        })
      },
      search () {
        searchKeyword(this.keyword).then(res => {
          if (res.code === 200) {
            this.data = res.data
          }
        })
      },
      // 点击每个小区获取小区名和小区id
      goVillage (item) {
        this.village = item.title
        this.villageShow = false
        this.keyword = ''
        this.villageid = item.id
        this.villageText = this.village
        this.getdatas(this.villageid)
        // 小区变更后房屋信息，房号以及面积都要清除
        this.areaString = '请选择房屋信息'
        this.roomString = '请选择房号'
        this.fillString = '例如1101'
        this.acreageString = '请输入面积'
        this.keepArea = ''
        this.roomNum = ''
        this.area = ''
      },
      // 房屋选择弹窗的数据
      getdatas (id) {
        // 清空数组的所有元素，防止缓存之前数组的元素
        p.splice(0, p.length)
        c.splice(0, c.length)
        a.splice(0, a.length)
        getHomeDate(id).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.lists = res.data
            // console.log(this.lists)
            this.lists.map(res => {
              // 判断小区是否有苑时的显示方式
              if (res.name === this.village) {
                p.push(res.name) // 苑
              } else {
                p.push(res.name + '苑')
              }
            })
            this.lists.map(res => {
              res.children.map(res => {
                c.push(res.name) // 楼幢
              })
            })
            this.lists.map(res => {
              res.children.map(res => {
                a.push(res.name) // 单元
              })
            })
          }
          if (res.code === 400) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 2000
            })
            this.areaString = '请选择房屋信息'
            this.roomString = '请选择房号'
            this.fillString = '例如1101'
            this.acreageString = '请输入面积'
            return
          }
        })
      },
      // 房屋信息弹窗取消按钮
      cancelBtn () {
        this.areaVisible = false
      },
      // 房屋信息弹窗确定按钮
      sureBtn () {
        this.areaString = this.keepArea
        this.areaVisible = false
        // 房号数据请求
        this._getRoomNum(this.did)
        console.log(this.did)
      },
      // 选择房屋信息弹窗
      handlerArea () {
        if (!this.villageid) {
          Toast({
            message: '请选择小区',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (p.length === 0) {
          Toast({
            message: '该小区没有房屋信息，请重新选择',
            position: 'middle',
            duration: 2000
          })
          return
        }
        this.areaVisible = true
      },
      // 房屋信息滑块弹窗内容
      onValuesChange (picker, values) {
        let one = values[0]
        let two = values[1]
        // let three = values[2]
        index = p.indexOf(one) // 苑
        if (index >= 0 && p.length > 0) {
          c = this.lists[index].children.map(res => { // 楼幢
            return res.name + '幢'
          })
          picker.setSlotValues(1, c)
          two = values[1]
        }
        index2 = c.indexOf(two) // 单元
        if (index2 >= 0 && c.length > 0) {
          a = this.lists[index].children[index2].children.map(res => {
            return [res.name, res.id] // 单元名,单元id
          })
          let newarea = []
          for (var i = 0; i < Object.values(a).length; i++) {
            // 单元的数组
            newarea.push(Object.values(a)[i][0])
            if (values[2] === Object.values(a)[i][0]) {
              this.did = Object.values(a)[i][1] // 单元的id
            }
          }
          picker.setSlotValues(2, newarea)
          // three = values[2]
        }
        this.keepArea = values.join('-') + '单元' // 拼接字符串（选中好的值以-连接）
        // console.log(this.keepArea)
      },
      // 选择房号信息弹窗的按钮
      openRoom () {
        if (p.length === 0) {
          Toast({
            message: '请先选择房屋信息',
            position: 'middle',
            duration: 2000
          })
          return
        }
        this.roomVisible = true
      },
      // 再次选择房号信息弹窗的按钮
      openRoom2 () {
        this.roomVisible = true
        this.roomFill = false
        this.roomSelectShow = true
        this.roomSelectShow2 = false
        this.areashow = false // 填写面积
      },
      // 获取房号信息
      _getRoomNum (id) {
        getRoomNum(id).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.roomNumList = res.data
          }
        })
      },
      // 点击选择房屋列表的某一个房号
      selectRoomNum (num) {
        this.roomVisible = false
        this.roomNum = num
        this.roomString = this.roomNum
        this.otherNum = 2
        // console.log(num)
      },
      // 点击其他
      selectOther () {
        this.roomSelectShow = false // 选择房号列隐藏
        this.roomVisible = false // 选择房号弹窗隐藏
        this.roomNum = '' // 当选择其他时房号为空
        this.roomFill = true // 填写房号显示
        this.areashow = true // 填写面积
        this.roomSelectShow2 = true // 当显示完填写的面积时显示的再次选择房号的弹窗
        this.otherNum = 1
      },
      // 获取真实姓名和电话号码
      _getUser () {
        getUser().then(res => {
          if (res.code === 200) {
            this.phoneNum = res.data.phone
            this.realname = res.data.real_name
          }
        })
      },
      //  获取验证码
      getCodeNum () {
        getIndentCode(this.phoneNum).then(res => {
          // console.log(res)
        })
        let me = this
        me.sendMsgDisabled = true  // 点击时变成true 那么就是显示多少秒后获取
        let interval = window.setInterval(function () {
          if ((me.time--) <= 0) {
            me.time = 60
            me.sendMsgDisabled = false
            window.clearInterval(interval)
          }
          me.msg = '重新获取'
        }, 1000)
      },
      // 图片上传（微信）
      getImage (image) {
        this.serverIds = image
      },
      // 图片上传（普通）
      getImg (image) {
        this.ordinaryImg = image
        console.log(this.ordinaryImg)
      },
      // 微信确认提交
      submitBtn() {
        setTimeout(function () {
          Indicator.close()
        }, 5000)
        if (!this.villageid) {
          Toast({
            message: '请选择小区',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (this.areaString !== this.keepArea) {
          Toast({
            message: '请选择房屋信息',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if ((this.areashow === true) && !this.area) {
          Toast({
            message: '请输入面积',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (this.area === 0 || this.area === '0') {
          Toast({
            message: '请输入面积',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (!this.roomNum) {
          Toast({
            message: '请选择或输入房号',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (!this.codeNum) {
          Toast({
            message: '请输入验证码',
            position: 'middle',
            duration: 2000
          })
          return
        }
        Indicator.open({
          text: '提交中...',
          spinnerType: 'fading-circle'
        })
        subData(this.codeNum, this.villageid, this.area, this.roomNum, this.did, this.serverIds, this.phoneNum, this.otherNum).then(res => {
          if (res.code === 200) {
            Indicator.close()
            Toast({
              message: res.data,
              position: 'middle',
              duration: 1500
            })
            this.$router.push('/My/IdentList')
          }
          if (res.code === 400) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 1500
            })
          }
        })
      },
      // 普通浏览器确认提交
      submitOrBtn() {
        setTimeout(function () {
          Indicator.close()
        }, 5000)
        if (!this.villageid) {
          Toast({
            message: '请选择小区',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (this.areaString !== this.keepArea) {
          Toast({
            message: '请选择房屋信息',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if ((this.areashow === true) && !this.area) {
          Toast({
            message: '请输入面积',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (this.area === 0 || this.area === '0') {
          Toast({
            message: '请输入面积',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (!this.roomNum) {
          Toast({
            message: '请选择或输入房号',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (!this.codeNum) {
          Toast({
            message: '请输入验证码',
            position: 'middle',
            duration: 2000
          })
          return
        }
        Indicator.open({
          text: '提交中...',
          spinnerType: 'fading-circle'
        })
        subOrData(this.codeNum, this.villageid, this.area, this.roomNum, this.did, this.ordinaryImg, this.phoneNum, this.otherNum).then(res => {
          if (res.code === 200) {
            Indicator.close()
            Toast({
              message: res.data,
              position: 'middle',
              duration: 1500
            })
            this.$router.push('/My/IdentList')
          }
          if (res.code === 400) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 1500
            })
          }
        })
      }
    }
  }
</script>
